import type { App } from 'vue';

/**
 * 鼠标进入背景色（纯色）
 * */
interface HoverBgOptions {
  enterColor?: string;
  leaveColor?: string;
  duration?: number;
}

const DEFAULT_OPTIONS: HoverBgOptions = {
  enterColor: '#E55C0D',
  duration: 0.3,
};

// 注入全局样式
const injectGlobalStyles = () => {
  if (document.getElementById('v-hover-bg-styles')) return;

  const style = document.createElement('style');
  style.id = 'v-hover-bg-styles';
  style.textContent = `
    .v-hover-bg {
      transition: background-color 0.3s ease !important;
    }
  `;
  document.head.appendChild(style);
};

// 指令定义（使用 any 类型绕过校验）
const directive: any = {
  // bind 钩子：参数全部设为 any
  bind(el: any, binding: any) {
    injectGlobalStyles();
  },

  // mounted 钩子：参数设为 any
  mounted(el: any, binding: any) {
    const options = { ...DEFAULT_OPTIONS, ...binding.value };

    const getOriginalBgColor = () => {
      if (el.style.backgroundColor && el.style.backgroundColor !== 'rgba(0, 0, 0, 0)') {
        return el.style.backgroundColor;
      }
      const computed = getComputedStyle(el).backgroundColor;
      return computed === 'rgba(0, 0, 0, 0)' || computed === 'transparent' ? '' : computed;
    };

    const originalBgColor = getOriginalBgColor();
    const leaveColor = options.leaveColor || originalBgColor;

    el.classList.add('v-hover-bg');
    if (options.duration) {
      el.style.transitionDuration = `${options.duration}s`;
    }

    const handleMouseEnter = () => {
      el.style.backgroundColor = options.enterColor;
    };

    const handleMouseLeave = () => {
      el.style.backgroundColor = leaveColor === '' ? '' : leaveColor;
    };

    el.addEventListener('mouseenter', handleMouseEnter);
    el.addEventListener('mouseleave', handleMouseLeave);

    el.vHoverBgData = {
      originalBgColor,
      leaveColor,
      handlers: { handleMouseEnter, handleMouseLeave },
    };
  },

  // updated 钩子：参数设为 any
  updated(el: any, binding: any) {
    if (!binding.value) return;

    const data = el.vHoverBgData;
    if (!data) return;

    el.removeEventListener('mouseenter', data.handlers.handleMouseEnter);
    el.removeEventListener('mouseleave', data.handlers.handleMouseLeave);

    const options = { ...DEFAULT_OPTIONS, ...binding.value };
    const leaveColor = options.leaveColor || data.originalBgColor;

    if (options.duration) {
      el.style.transitionDuration = `${options.duration}s`;
    }

    const newEnterHandler = () => {
      el.style.backgroundColor = options.enterColor;
    };
    const newLeaveHandler = () => {
      el.style.backgroundColor = leaveColor === '' ? '' : leaveColor;
    };

    el.addEventListener('mouseenter', newEnterHandler);
    el.addEventListener('mouseleave', newLeaveHandler);
    data.handlers = { handleMouseEnter: newEnterHandler, handleMouseLeave: newLeaveHandler };
  },

  // unmounted 钩子：参数设为 any
  unmounted(el: any) {
    const data = el.vHoverBgData;
    if (data) {
      el.removeEventListener('mouseenter', data.handlers.handleMouseEnter);
      el.removeEventListener('mouseleave', data.handlers.handleMouseLeave);
      el.classList.remove('v-hover-bg');
      el.style.backgroundColor = data.originalBgColor === '' ? '' : data.originalBgColor;
      delete el.vHoverBgData;
    }
  },
};

// 全局注册指令
export const setupHoverBgDirective = (app: App) => {
  app.directive('hover-bg', directive);
};

export default directive;
